<!--
 * @Description:执行结果
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2022-01-06 10:40:15
 * @LastEditTime: 2022-01-06 15:45:43
-->
<template>
  <div class="sql-result">
    <el-tabs v-model="tabValue" type="card">
      <el-tab-pane label="执行结果" name="result">
        <el-table
          v-if="resultList.length"
          :data="resultList"
          height="100%"
          border
          class="width-table custom-scrollbar"
        >
          <el-table-column
            v-if="columns.length"
            type="index"
            width="50"
            fixed="left"
            :resizable="false"
          >
            <template slot="header"><span>Num</span></template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in columns"
            :key="item + index"
            :prop="item"
            :label="item"
            :resizable="false"
            min-width="100px"
            show-overflow-tooltip
          >
            <template slot="header">
              <div class="col-tooltip">
                <el-tooltip effect="dark" :content="item" placement="top">
                  <span class="col-head-span">{{ item }}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <empty v-else desc="无运行结果" />
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="history">
        <el-table
          :data="historyData"
          height="300"
          class="width-table custom-scrollbar"
        >
          <el-table-column prop="date" label="时间" width="180" />
          <el-table-column prop="sql" label="执行语句" />
          <el-table-column fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="copySql(scope.row.sql)"
              >复制</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import empty from './empty.vue'
export default {
  name: 'SqlResult',
  components: {
    empty
  },
  data() {
    return {
      tabValue: 'result',
      historyData: [
        {
          date: '2016-05-02 23:23:11',
          sql: 'create table classes(\n\tid int unsigned auto_increment primary key not null,\n\tname varchar(10));'
        },
        {
          date: '2016-05-04 11:00:21',
          sql: 'select sum(field1) as sumvalue from table1'
        },
        {
          date: '2016-05-04 11:00:21',
          sql: 'select sum(field1) as sumvalue from table1'
        },
        {
          date: '2016-05-04 11:00:21',
          sql: 'select sum(field1) as sumvalue from table1'
        },
        {
          date: '2016-05-04 11:00:21',
          sql: 'select sum(field1) as sumvalue from table1'
        },
        {
          date: '2016-05-04 11:00:21',
          sql: 'select sum(field1) as sumvalue from table1'
        },
        {
          date: '2016-05-04 11:00:21',
          sql: 'select sum(field1) as sumvalue from table1'
        }
      ],
      resultList: [
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 1, b: 2, c: 3, d: 4 }
      ],
      columns: ['a', 'b', 'c', 'd']
    }
  },
  methods: {
    copySql(sql) {
      const input = document.createElement('input')
      document.body.appendChild(input)
      input.value = sql // 复制到剪切板的内容
      input.select()
      if (document.execCommand) {
        document.execCommand('copy')
        input.remove()
        this.$message.success('Copy success')
      } else {
        this.$message.error('Current browser does not support copy')
        input.remove()
      }
    }
  }
}
</script>
<style scoped lang="scss">
.sql-result {
  width: calc(100% - 5px);
  ::v-deep .el-tabs {
    .el-tabs__header .el-tabs__item.is-active {
      background: #fff;
    }
    .el-tabs__header .el-tabs__nav {
      border-radius: 0;
    }
  }
}
</style>
